<template>
  <div>
    <index-header @change-password="editDialog = true"></index-header>
    <index-slider></index-slider>
    <keep-alive>
      <router-view class="index-main"></router-view>
    </keep-alive>

  </div>
</template>

<script>
import API from "@/api/apiBase";
export default {
  name: "IndexMain",
  data() {
    return {
      codeTime: 60,
      codeTips: "获取验证码",
      inputType: "text",
      editDialog: false,
      // 编辑弹窗表单
      editDialogForm: {
        telephone: null,
        code: null,
        password: null,
        checkPassword: null
      },
    };
  },
  activated() {
  },
  computed: {
  },
  methods: {
    // 防止密码自动输入
    changeInputType() {
      this.inputType = "password";
    },
    // 编辑弹窗关闭
    handleEditDialogClose() {
      this.editDialog = false;
      this.$refs.editDialogRules.resetFields();
    },
    goPage() {
      this.$router.push({
        path: "/homePage"
      });
    },
    handleLogout() {
      const params = {
        token: this.$store.state.token
      };
      API.logout(params).then(res => {
        if (res.key === 1000) {
          this.$ls.remove("mujingtoken");
          this.$ls.remove("mujinguserInfo");
          this.$ls.remove("mujingpermissionList");
          this.$ls.remove("mujingpermissionNameList");
          location.reload();
          // location.href = "/#/login";
          // this.$router.push({
          //   path: "/logout"
          // });
        }
      });
    },
    handleEdit() {
      console.log(111, this.$refs, this.$refs.editDialogRules);
      this.$refs.editDialogRules.validate(valid => {
        if (!valid) return;
        const params = {
          code: this.editDialogForm.code,
          telephone: this.editDialogForm.telephone,
          password: this.editDialogForm.password
        };
        API.upMyPassword(params).then(res => {
          if (res.key === 1000) {
            this.editDialog = false;
            this.$message({
              type: "success",
              message: "修改密码成功"
            });
          }
        });
      });
    },
    codeTimer() {
      if (this.codeTime > 1) {
        this.codeTime--;
        this.codeTips = this.codeTime + "s";
        setTimeout(() => {
          this.codeTimer();
        }, 1000);
      } else {
        this.codeTime = 60;
        this.codeTips = "发送验证码";
      }
    },
    sendCode() {
      this.$refs.editDialogRules.validateField("telephone");
      if (!this.codeClickBol) return;
      this.codeTime = 59; // 禁止连续点击
      this.$bus.$emit("show-loading", true);
      let params = {
        telephone: this.editDialogForm.telephone,
        type: 30
      };
      API.getCode(params).then(res => {
        this.codeTime = 60;
        if (res.key === 1000) {
          this.codeTips = this.codeTime + "s";
          this.codeTimer();
          this.codeStatus = true;
          // this.$message({
          //   type: "success",
          //   message: "获取验证码成功"
          // });
        }
        this.$bus.$emit("show-loading", false);
      });
    }
  }
};
</script>

<style lang="sass" scoped>
.index-main
  height: calc(100vh - 2px)
  padding: 90px 15px 30px 200px
  display: flex
  width: 97%
  margin: 0 auto
  flex-direction: column
  ::v-deep > div
    flex: 0 0 auto
    &:last-child
      flex: 1
.code
  position: relative
  .code-text
    position: absolute
    right: 0
    top: 0
    width: 92px
    height: 40px
    line-height: 40px
    cursor: pointer
    text-align: center
    color: $main-color
</style>
